<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义键盘</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="../css/app.css?rev=@@hash"/>
    <!--<script src="../js/miju.flexible.js"></script>-->
</head>

<body>

    <div>

        <button class="btn-block btn-primary" id="J_OpenKeyBoard">打开</button>
        <button class="btn-block btn-primary" id="J_CloseKeyBoard">关闭</button>

        <!--<button class="btn-block btn-primary" id="J_OpenKeyBoard2">打开</button>-->

        <div id="placeholder" style="margin-top:2rem;"></div>

        <div class="m-keyboard" id="J_KeyBoard"></div>



        <!--<div class="m-keyboard" id="J_KeyBoard2"></div>-->

        <!--<div id="placeholder2"></div>-->

        <!--<div class="m-keyboard-password" style="margin-top: 2rem;">-->
            <!--<li><i></i></li>-->
            <!--<li><i></i></li>-->
            <!--<li><i></i></li>-->
            <!--<li><i></i></li>-->
            <!--<li><i></i></li>-->
            <!--<li><i></i></li>-->
        <!--</div>-->

        <!--keyboard-show——1-->
        <div class="m-keyboard">
            <div class="keyboard-title">房助理安全键盘</div>
            <ul class="keyboard-numbers">
                <li><a href="javascript:;">1</a><a href="javascript:;">2</a><a href="javascript:;">3</a></li>
                <li><a href="javascript:;">4</a><a href="javascript:;">5</a><a href="javascript:;">6</a></li>
                <li><a href="javascript:;">7</a><a href="javascript:;">8</a><a href="javascript:;">9</a></li>
                <li><a href="javascript:;">取消</a><a href="javascript:;">0</a><a href="javascript:;"></a></li>
            </ul>
        </div>
    </div>

    <script src="../js/miju.flexible.js"></script>
    <script src="../vendor/zepto.min.js"></script>
    <script src="../js/miju.js"></script>

    <script>

//        var $keyboard = miju('#J_KeyBoard');

        var dialog = miju.dialog;

        var $keyboard = miju('#J_KeyBoard').keyBoard({
            placeholder: $('#placeholder'),
            disorder: false, // 是否打乱数字顺序
            title: '房助理安全键盘', // 显示标题
            ondonekeyboard: function(ret) {
                            // 弹出请求中提示框
            dialog.loading.open('验证支付密码');

            // 模拟AJAX校验密码
            setTimeout(function () {
                // 关闭请求中提示框
                dialog.loading.close();

                dialog.alert('输入的密码是：' + ret.password);

            }, 1500);

            }
        });


        Zepto('#placeholder').on('click', function () {
            console.log('xxx');
            $keyboard.open();
        });

        Zepto('#J_OpenKeyBoard').on('click', function () {
            console.log('xxx');
            $keyboard.open();
        });

        Zepto('#J_CloseKeyBoard').on('click', function () {
            console.log('xxx');
            $keyboard.close();
        });

//        // 六位密码输入完毕后执行
//        Zepto($keyboard).on('done.miju.keyboard', function (ret) {
//
//            console.log('输入的密码是：' + ret.password);
//
//            // 弹出请求中提示框
////            dialog.loading.open('验证支付密码');
//
//            // 模拟AJAX校验密码
////            setTimeout(function () {
////                // 关闭请求中提示框
////                dialog.loading.close();
////
////                // 显示错误信息
////                $keyboard.keyBoard('error', '对不起，您的支付密码不正确，请重新输入。');
////            }, 1500);
//
//            // 关闭键盘
//            // $keyboard.keyBoard('close');
//        });


//        var $keyboard2 = miju('#J_KeyBoard2').keyBoard({
//            placeholder: $('#placeholder2'),
//            disorder: true, // 是否打乱数字顺序
//            title: 'MIJU安全键盘' // 显示标题
//        });
//
//
//        Zepto('#J_OpenKeyBoard2').on('click', function () {
//            console.log('xxx');
//            $keyboard2.open();
//        });


    </script>

    <!--<script>-->
        <!--Zepto('.keyboard-title').css('font-size');-->
    <!--Zepto('.m-keyboard').toggleClass('keyboard-show');-->
    <!--</script>-->

</body>
</html>